From: kramo Date: Sat, 9 Aug 2025 19:06:32 +0000 (+0200) Subject: ui: Tweak some animations X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~104^2^2~82 X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=7ecdae4bf5af586cb48054fd3ca857d1fbd136a2;p=gnome-shell.git ui: Tweak some animations Changed some linear animations to be quad, added a scale transition to popovers and notifications. Part-of: --- diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 0bc8f9ad5..6aea0fdf7 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -2700,7 +2700,7 @@ export const AppFolderDialog = GObject.registerClass({ scale_y: 1, opacity: 255, duration: FOLDER_DIALOG_ANIMATION_TIME, - mode: Clutter.AnimationMode.EASE_OUT_QUAD, + mode: Clutter.AnimationMode.EASE_OUT_EXPO, }); this._needsZoomAndFade = false; @@ -2731,14 +2731,19 @@ export const AppFolderDialog = GObject.registerClass({ mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); + this.child.ease({ + opacity: 0, + duration: FOLDER_DIALOG_ANIMATION_TIME, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, + }); + this.child.ease({ translation_x: sourceX - dialogX, translation_y: sourceY - dialogY, scale_x: this._source.width / this.child.width, scale_y: this._source.height / this.child.height, - opacity: 0, duration: FOLDER_DIALOG_ANIMATION_TIME, - mode: Clutter.AnimationMode.EASE_OUT_QUAD, + mode: Clutter.AnimationMode.EASE_OUT_EXPO, onComplete: () => { this.child.set({ translation_x: 0, diff --git a/js/ui/boxpointer.js b/js/ui/boxpointer.js index 41b912f68..c758911b4 100644 --- a/js/ui/boxpointer.js +++ b/js/ui/boxpointer.js @@ -91,18 +91,25 @@ export const BoxPointer = GObject.registerClass({ this.show(); if (animate & PopupAnimation.SLIDE) { + this.scale_x = 0.96; + this.scale_y = 0.96; + switch (this._arrowSide) { case St.Side.TOP: this.translation_y = -rise; + this.set_pivot_point(0.5, 0); break; case St.Side.BOTTOM: this.translation_y = rise; + this.set_pivot_point(0.5, 1); break; case St.Side.LEFT: this.translation_x = -rise; + this.set_pivot_point(0, 0.5); break; case St.Side.RIGHT: this.translation_x = rise; + this.set_pivot_point(1, 0.5); break; } } @@ -111,8 +118,10 @@ export const BoxPointer = GObject.registerClass({ opacity: 255, translation_x: 0, translation_y: 0, + scale_x: 1, + scale_y: 1, duration: animationTime, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => { this._muteInput = false; if (onComplete) @@ -127,24 +136,33 @@ export const BoxPointer = GObject.registerClass({ let translationX = 0; let translationY = 0; + let scaleX = 1; + let scaleY = 1; let themeNode = this.get_theme_node(); let rise = themeNode.get_length('-arrow-rise'); let fade = animate & PopupAnimation.FADE; let animationTime = animate & PopupAnimation.FULL ? POPUP_ANIMATION_TIME : 0; if (animate & PopupAnimation.SLIDE) { + scaleX = 0.96; + scaleY = 0.96; + switch (this._arrowSide) { case St.Side.TOP: - translationY = rise; + translationY = -rise; + this.set_pivot_point(0.5, 0); break; case St.Side.BOTTOM: - translationY = -rise; + translationY = rise; + this.set_pivot_point(0.5, 1); break; case St.Side.LEFT: - translationX = rise; + translationX = -rise; + this.set_pivot_point(0, 0.5); break; case St.Side.RIGHT: - translationX = -rise; + translationX = rise; + this.set_pivot_point(1, 0.5); break; } } @@ -157,8 +175,10 @@ export const BoxPointer = GObject.registerClass({ opacity: fade ? 0 : 255, translation_x: translationX, translation_y: translationY, + scale_x: scaleX, + scale_y: scaleY, duration: animationTime, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => { this.hide(); this.opacity = 0; diff --git a/js/ui/closeDialog.js b/js/ui/closeDialog.js index 88cc1c8c5..ccd3ffc5e 100644 --- a/js/ui/closeDialog.js +++ b/js/ui/closeDialog.js @@ -167,12 +167,14 @@ export const CloseDialog = GObject.registerClass({ global.connectObject( 'shutdown', () => this._onWait(), this._dialog); - this._dialog._dialog.scale_y = 0; this._dialog._dialog.set_pivot_point(0.5, 0.5); + this._dialog._dialog.scale_x = 0.8; + this._dialog._dialog.scale_y = 0.8; this._dialog._dialog.ease({ + scale_x: 1, scale_y: 1, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_BACK, duration: DIALOG_TRANSITION_TIME, onComplete: this._onFocusChanged.bind(this), }); @@ -198,8 +200,10 @@ export const CloseDialog = GObject.registerClass({ dialog.makeInactive(); dialog._dialog.ease({ - scale_y: 0, - mode: Clutter.AnimationMode.LINEAR, + opacity: 0, + scale_x: 0.8, + scale_y: 0.8, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, duration: DIALOG_TRANSITION_TIME, onComplete: () => dialog.destroy(), }); diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js index 30502bfe1..cbc006478 100644 --- a/js/ui/messageTray.js +++ b/js/ui/messageTray.js @@ -1175,10 +1175,15 @@ export const MessageTray = GObject.registerClass({ this._bannerBin.ease({ opacity: 255, duration: ANIMATION_TIME, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); + this._bannerBin.set_pivot_point(0.5, 0.5); + this._bannerBin.scale_x = 0.9; + this._bannerBin.scale_y = 0.9; this._bannerBin.ease({ y: 0, + scale_x: 1, + scale_y: 1, duration: ANIMATION_TIME, mode: Clutter.AnimationMode.EASE_OUT_BACK, onComplete: () => { diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js index 7bddba5a1..e8e90da87 100644 --- a/js/ui/overviewControls.js +++ b/js/ui/overviewControls.js @@ -821,7 +821,7 @@ class ControlsManager extends St.Widget { this.ease({ opacity: 255, duration: STARTUP_ANIMATION_TIME, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, }); // Search bar falls from the ceiling diff --git a/js/ui/quickSettings.js b/js/ui/quickSettings.js index c69263904..056c6d343 100644 --- a/js/ui/quickSettings.js +++ b/js/ui/quickSettings.js @@ -835,7 +835,7 @@ export const QuickSettingsMenu = class extends PopupMenu.PopupMenu { }); this._boxPointer.ease_property('@effects.dim.brightness', color, { - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, duration: POPUP_ANIMATION_TIME, onStopped: () => (this._dimEffect.enabled = dim), }); diff --git a/js/ui/ripples.js b/js/ui/ripples.js index 21f5cea21..87e304fb7 100644 --- a/js/ui/ripples.js +++ b/js/ui/ripples.js @@ -74,7 +74,7 @@ export class Ripples { delay, duration, animationRequired, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => (ripple.visible = false), }); } diff --git a/js/ui/windowManager.js b/js/ui/windowManager.js index e48e6d3fc..a9936c530 100644 --- a/js/ui/windowManager.js +++ b/js/ui/windowManager.js @@ -149,7 +149,7 @@ class WindowDimmer extends Clutter.BrightnessContrastEffect { }); this.actor.ease_property(`@effects.${this.name}.brightness`, color, { - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, duration: (dimmed ? DIM_TIME : UNDIM_TIME) * (animate ? 1 : 0), onStopped: () => this._syncEnabled(dimmed), }); diff --git a/js/ui/workspaceThumbnail.js b/js/ui/workspaceThumbnail.js index d029563a7..a34ebd44f 100644 --- a/js/ui/workspaceThumbnail.js +++ b/js/ui/workspaceThumbnail.js @@ -1102,7 +1102,7 @@ export const ThumbnailsBox = GObject.registerClass({ thumbnail.ease_property('slide-position', 1, { duration: SLIDE_ANIMATION_TIME, - mode: Clutter.AnimationMode.LINEAR, + mode: Clutter.AnimationMode.EASE_OUT_QUAD, onComplete: () => { this._setThumbnailState(thumbnail, ThumbnailState.ANIMATED_OUT); this._queueUpdateStates();